<template>
  <div class="app">
    <el-container>
      <el-header>头部</el-header>
    </el-container>
    <div class="text_content">
      <div class="content">
        <p class="text_title">请输入内容</p>
        <hr />
        <p class="search_content">
          <el-input class="input_text_content" type="textarea" placeholder="请输入内容" v-model="textContent"
            :maxlength="total" show-word-limit autosize>
          </el-input>
          <!-- <video src="https://vd7.bdstatic.com/mda-pcf8expv3qfbdpsq/sc/cae_h264/1678946513067783188/mda-pcf8expv3qfbdpsq.mp4" style="width: 300px; height: 200px;"></video> -->
          <span v-show="isShow">
            <audio ref="audio" controls :src="PlaybackPath" class="add">
            </audio>
          </span>
        </p>
        <div class="submit">
          <p class="number_total">统计字数: &nbsp;{{ textContent.length }} /{{ total }}</p>
          <el-button type="primary" @click="onSubmit">合成音频</el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      input: '',
      textContent: '',
      PlaybackPath: '',
      total: 60000,
      isShow: 0,

    }
  },
  created() { },
  mounted() { },
  methods: {
    input_content() {
      console.log(this.input);
    },
    onSubmit() {
      this.isShow = 1
      let music1 = new Audio();
      music1 = require('../assets/001.mp3');
      this.$refs.audio.src = music1;
      this.$refs.audio.play()

    }
  },
  components: {}
}
</script>

<style lang="scss" scoped>
.app {
  height: 100vh;
  background-color: rgb(241, 242, 246);
}

.el-header,
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.text_content {
  padding: 30px;

  .search_content {
    margin: 0;
    margin-top: 30px;
    padding-left: 15px;
    padding-right: 30px;
    color: #898989;
    text-align: left;
    min-height: 20vh;
  }
}

.content {
  background: #fff;
  padding: 30px;
  border-radius: 12px;

  .text_title {
    text-align: left;
    color: #575757;
    font-size: 20px;
  }

  .submit {
    text-align: right;

    .number_total {
      display: inline-block;
      margin-right: 30px;
    }
  }
}

.input_text_content /deep/ .el-textarea__inner {
  min-height: 30vh !important;
}

.add {

  width: 100%;
}

// .borderNone /deep/ .el-input__inner {
//   border: none;
// }
</style>
